<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类</title>
    <link rel="stylesheet" href="./font_fenlei/iconfont.css">
    <link rel="stylesheet" href="./swiper-7.2.0/swiper/swiper-bundle.min.css">

    <style>
        .swiper-slide{
            
        }
        .swiper-pagination-bullet{
            width: 20px;
            height: 20px;
        }
        .swiper-pagination{
            margin-left: 10px;
            margin-top: -30px;
            
            
        }
        .mySwiper{
           
            height: 330px;

        }
        .swiper-slide img {
        
       
        height: 300px;
    
        margin-top: 30px;
        margin-left: 60px;
        margin-right: 0;
      }
        .top{
            background-color: rgb(254, 139, 170);        
            height: 200px;
            display: flex;  
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 10;
        }
        .top span{ 
            font-size: 50px;
            margin-left: 40px;
        }
        .top input{
            height: 60px;
            border-radius: 50px;
            background-color: white;
            border: none;
            font-size: 40px;
            margin-top: 5px;
        }
        .top input::-webkit-input-placeholder{
            color: rgb(206, 198, 198);
            font-size: 30px;
            top: 10px;
            left: 10px;
        }
        .top>div{
            display: flex;
            background-color: white;
            height: 70px;
            margin-top: 90px;
            margin-left: 30px;
            border-radius: 50px;
            padding-right: 20px;
            
        }
        .icon-saomiao{
            font-size: 60px;
            color: rgb(238, 225, 225);
            margin-top: 100px;
        }
        .icon-fangdajing{
           margin-top: 10px;
           color: rgb(175, 174, 174);
        }
        .icon-zhaoxiangji{
            margin-top: 10px;
            color: rgb(160, 157, 157);
            
        }
        .icon-xiaoxi{
            margin-top: 100px;
            color: rgb(238, 225, 225);
            margin-left: -10px;
        }
        .center{
            display: flex;
            margin-top: 200px;
            
        }
        .left{
            margin-left: -7px;
            background-color: rgb(238, 237, 237);
            width: 1200px;
            overflow-y: auto;
            height: 1550px;
            
        }
        .left h2{
            font-size: 50px;
            text-align: center;
        }
        .right{
            margin-top: -1150px;
            margin-left: 800px;
        
            flex-wrap: wrap;
          
           
        }
        .right h2{
            width: 150px;
            margin-left: -450px;
            font-size: 30px;
         /*    margin-top: 100px; */
        }
        .rt{
            display: flex;
            flex-wrap: wrap;
            margin-left: -460px;
        }
        .rt>div{

        }
        .rt img{
            width: 150px;
            height: 100px;
            margin-left: 40px;
        }
        .rt p{
            font-size: 40px;
            margin-left: 30px;
            text-align: center;
        }
/* ////////////////////分割//////////////////// */
        .right1{
           
            /* margin-left: 500px; */
       
            flex-wrap: wrap;
            height: 700px;
          
           
        }
        .right1 h2{
            width: 150px;
            margin-left: -450px;
            font-size: 30px;
         /*    margin-top: 100px; */
        }
        .rt1{
            display: flex;
            flex-wrap: wrap;
            margin-left: -460px;
        }
        .rt1>div{

        }
        .rt1 img{
            width: 150px;
            height: 100px;
            margin-left: 40px;
        }
        .rt1 p{
            font-size: 40px;
            margin-left: 30px;
            text-align: center;
        }
        
        .bottom{
            background-color:white;        
            height: 130px;
            display: flex;  
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 10;
        }
        .bottom>div{
            display: flex;
            flex-grow: 1;
            height: 70px;
            margin-top: 10px;
            

        }
        .bottom a{
            text-decoration:none
        }
        .bottom span{
            font-size: 60px;
            margin-left: 40px;
            color: black;
           

        }
        .bottom p{
            color: black;
            margin-left: 40px;
            text-align: center;
        }

        .txx{
            position: fixed;
            right: 20px;
            top: 1000px;
           
       
           
        }
        .txx1{
            background-color: tomato;
            padding: 10px;
            border-radius: 20px;
            color: rgb(238, 230, 230);
        }
        .txx h2{
            text-align: center;
        }
        .txx h3{
            text-align: center;
            margin-bottom: 0;
        }
        .txx h4{
           margin: 0;
           margin-right: 30px;
           margin-left: 50px;
            font-size: 30px;
            background-color: rgb(102, 92, 92);
            border-radius: 50%;
            text-align: center;
            color: rgb(199, 195, 195);
        }
    </style>
</head>
<body>
    <div class="top">
            <span class="iconfont icon-saomiao"></span>
            <div>
                <span class="iconfont icon-fangdajing"></span>
              <a href="./sousuo.html">
                    <input type="search" placeholder="烧烤炉" id="search" name="search" >
                </a>

                <span class="iconfont icon-zhaoxiangji"></span>
            </div>
            <span class="iconfont icon-xiaoxi"></span>
            
    </div>
    <div class="center">
        <div class="left">
            <h2>推荐分类</h2>
            <h2>京东超市</h2>
            <h2>电脑办公</h2>
            <h2>美妆护肤</h2>
            <h2>数码</h2>
            <h2>食品酒饮</h2>
            <h2>家具家装</h2>
            <h2>男装</h2>
            <h2>二手商品</h2>
            <h2>运动户外</h2>
            <h2>家居厨具</h2>
            <h2>手机</h2>
            <h2>内衣配饰</h2>
            <h2>手机</h2>
            <h2>女装</h2>
            <h2>个护清洁</h2>
            <h2>家电</h2>
            <h2>五金</h2>
            <h2>药品</h2>
            <h2>户外</h2>
        </div>
        
                <!-- Swiper -->
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./drug.jpg" ></div>
          <div class="swiper-slide"><img src="./blf.jpg" ></div>
          <div class="swiper-slide"><img src="./drug.jpg" ></div>
          <div class="swiper-slide"><img src="./blf.jpg" ></div>
          
        </div>
        <div class="swiper-pagination"></div>
      </div>
      </div>

      <div class="right">
        <h2>常用分类</h2>
        <div class="rt">
            <div>
                <img src="./blf.jpg" >
                <p>游戏本</p>
            </div>
            <div>
                <img src="./blf.jpg" >
                <p>吉他</p>
            </div>
            <div>
                <img src="./blf.jpg" >
                <p>笔记本</p>
            </div>
            <div>
                <img src="./blf.jpg" >
                <p>显卡</p>
            </div>
            <div>
                <img src="./blf.jpg" >
                <p>台式机</p>
            </div>
            <div>
                <img src="./blf.jpg" >
                <p>演讲与口才</p>
            </div>
        </div>

      <div class="right1">
        <h2>热门分类</h2>
        <div class="rt1">
            <div>
                <img src="./blf.jpg" >
                <p>笔记本</p>
            </div>
            <div>
                <img src="./blf.jpg" >
                <p>空调</p>
            </div>
            <div>
                <img src="./blf.jpg" >
                <p>手机</p>
            </div>
            <div>
                <img src="./blf.jpg" >
                <p>服饰</p>
            </div>
            <div>
                <img src="./blf.jpg" >
                <p>休闲零食</p>
            </div>
            <div>
                <img src="./blf.jpg" >
                <p>生鲜</p>
            </div>
        </div>
          </div>
        </div>

        <div class="bottom">
            <div>
                <a href="./main.html">
                <span class="iconfont icon-shouye"></span>
                <p>首页</p>
            </a>
            </div>
            <div>
                <a href="./fenlei.html">
                <span class="iconfont icon-fenlei"></span>
                <p>分类</p>
            </a>
            </div>
            <div>
                <a href="#">
                <span class="iconfont icon-faxian"></span>
                <p>发现</p>
            </a>
            </div>
            <div>
                <a href="./pay.html">
                <span class="iconfont icon-gouwuche"></span>
                <p>购物车</p>
            </a>
                
            </div>
            <div>
                <a href="./wode.html">
                <span class="iconfont icon-wode"></span>
                <p>我的</p>
            </a>
            </div>
  
            
        </div>
        <div class="txx">
            <div class="txx1">
                <h2>￥12</h2>
                <h3>惊喜红包</h3>
            </div>              
           <h4>X</h4>
        </div>
        


   </script>
    <script>
    var txx=document.getElementsByClassName("txx")[0];
    var txx1=txx.getElementsByClassName("txx1")[0];
    var h3=txx1.querySelector("h3");
    var h2=txx1.querySelector("h2");
    var h4=txx.querySelector("h4");
    h4.onclick=function(){
        txx.style.display="none";
    }
    </script>


    
    
    

    <script src="./swiper-7.2.0/swiper/swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper(".mySwiper", {
          pagination: {
            el: ".swiper-pagination",
          },
        });
      </script>
</body>
</html>